<template>
	<div class="addComplaintsDoctor">
		<span class="title">医生投诉</span>
		<div class="form" style="height: 510px;">
		<hr />
			<el-form :model="Complaintpatient" :rules="rules" ref="Complaintpatient">
				<el-form-item label="投诉人姓名" prop="complainant">
					<el-input type="text" v-model="Complaintpatient.complainant" placeholder="请输入姓名" :disabled="isAnonymous"
						style="width: 200px;"></el-input>
						<el-button type="text" @click="toggleAnonymous">{{ isAnonymous ? '取消匿名' : '匿名' }}</el-button>
				</el-form-item>

				<el-form-item label="投诉人电话" prop="phone">
					<el-input type="text" v-model="Complaintpatient.phone" placeholder="请输入电话号码" :disabled="isAnonymous"
						style="width: 250px;"></el-input>
				</el-form-item>
				<el-form-item label="投诉类型" prop="doctor">
					<el-select style="width: 130px" v-model="Complaintpatient.type">
						<el-option v-for="item in ctype" :key="item.value" :label="item.value"
							:value="item.label">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="投诉内容" prop="content" required>
					<el-input type="textarea" v-model="Complaintpatient.content" placeholder="请输入投诉内容" :cols="20"
						:rows="3" style="width: 300px;"></el-input>
				</el-form-item>
			</el-form>
			<el-form>
				<el-form-item>
					<el-button type="primary" @click="onSubmit('Complaintpatient')">提交</el-button>
					<el-button @click="resetForm('Complaintpatient')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import axios from 'axios';

	export default {
		data() {
			//正则验证
			let checkPhone = (rule, value, callback) => {
				if (!value) {
					callback(new Error('请输入手机号'));
					return;
				}

				if (!/^\d+$/.test(value)) {
					callback(new Error('手机号应为数字'));
					return;
				}

				if (value.length !== 11) {
					callback(new Error('手机号应为11位数'));
					return;
				}

				callback();
			}
			return {
				isAnonymous: false, // 控制匿名状态
				type: [],
				ctype: [{
						value: '医疗质量',
						label: '医疗质量'
					},
					{
						value: '医疗服务',
						label: '医疗服务'
					},
					{
						value: '其他问题',
						label: '其他问题'
					}
				],
				Complaintpatient: {
					date: '',
					type:'',
					complainant: '',
					phone: '',
					content: ''
				},
				rules: {
					content: [{
						required: true,
						message: '请输入投诉内容',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			toggleAnonymous() {
				if (this.isAnonymous) {
					// 取消匿名
					this.isAnonymous = false;
				} else {
					// 设置匿名
					this.isAnonymous = true;
				}
			},
			onSubmit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 收集表单数据
						let complaintData = {
							date: new Date().toISOString(),
							type: this.Complaintpatient.type,
							complainant: this.Complaintpatient.complainant,
							phone: this.Complaintpatient.phone,
							content: this.Complaintpatient.content
						};
						console.log(complaintData);

						// 发送到后端
						axios.post('http://localhost:8088/insertComplaintpatient', complaintData)
							.then(response => {
								this.$message({
									message: '提交成功！',
									type: 'success'
								});
								console.log(response.data);
								this.resetForm(formName);
							})
							.catch(error => {
								this.$message.error('提交失败，请重新填写！');
								console.error(error);
							});
					} else {
						this.$message.error('提交失败，请重新填写！');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	};
</script>

<style lang="stylus-loader" rel="stylesheet/stylus">
	/* 现代简洁风格表单样式 */
	.addComplaintsDoctor {
	  padding: 30px;
	  margin: 20px;
	  max-width: 700px;
	  margin: 0 auto;
	}
	
	.title {
	  color: #333333;
	  font-size: 22px;
	  font-weight: 600;
	  margin-bottom: 25px;
	  text-align: center;
	  padding-bottom: 15px;
	  border-bottom: 1px solid #eeeeee;
	}
	
	.form {
	  display: flex;
	  flex-direction: column;
	  gap: 25px;
	}
	
	.el-form-item {
	  margin-bottom: 20px;
	}
	
	/* 表单标签样式 */
	.el-form-item__label {
	  color: #555555;
	  font-weight: 500;
	  font-size: 15px;
	}
	

	.el-textarea {
	  height: 120px;
	}
	
	.el-input__inner, .el-textarea__inner {
	  border: 1px solid #e0e0e0;
	  border-radius: 6px;
	  padding: 0 15px;
	  font-size: 14px;
	  color: #333333;
	}
	
	.el-input__inner:focus, .el-textarea__inner:focus {
	  border-color: #888888;
	  box-shadow: 0 0 0 2px rgba(136, 136, 136, 0.1);
	}
	
	/* 日期选择器样式 */
	.el-date-editor {
	  width: 100%;
	}
	
	/* 下拉选择框样式 */
	.el-select {
	  width: 100%;
	}
	
	
	
	/* 表单布局 */
	.form-layout {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: 20px;
	}
	
	.form-group {
	  margin-bottom: 20px;
	}
	
	.full-width {
	  grid-column: span 2;
	}
	
	/* 错误提示样式 */
	.el-form-item__error {
	  color: #e74c3c;
	  font-size: 13px;
	  margin-top: 5px;
	}
	
	/* 表单底部按钮区域 */
	.form-actions {
	  display: flex;
	  justify-content: center;
	  gap: 20px;
	  margin-top: 30px;
	}
	
	/* 响应式设计 */
	@media (max-width: 768px) {
	  .form-layout {
	    grid-template-columns: 1fr;
	  }
	  
	  .full-width {
	    grid-column: span 1;
	  }
	  
	  .title {
	    font-size: 20px;
	  }
	}
</style>